<!--
 * @Description: 新建场景页面顶部工具栏
 * @Author: 崔堂袁
 * @Date: 2021-04-19 23:25:42
 * @LastEditTime: 2021-05-08 22:37:01
-->
<template>
  <div class="header"
       :class="{'header-shouqi': !isFullScreen}">
    <!-- 回退按钮 -->
    <a-tooltip placement="bottom"
               :color="userThemeColor || 'blue'">
      <template #title>{{$t('lang.newScenePage.backToHomeBtn')}}</template>
      <div class="backToHomeBtn"
           @click="backToHomeClick">
        <ArrowLeftOutlined />
      </div>
    </a-tooltip>
    <a-modal class="userModal"
             v-model:visible="confirmExitModal"
             :title="$t('lang.newScenePage.attention')"
             :okText="$t('lang.newScenePage.determine')"
             :cancelText="$t('lang.newScenePage.cancel')"
             @ok="handleOk">
      {{$t('lang.newScenePage.backPrompt')}}
    </a-modal>
    <!-- 页面标题 -->
    <div class="pageTitle">
      <span>{{$store.state.editOrNewDesignControl.isNewDesign===true?$t('lang.newScenePage.newSceneTitle'):$store.state.editOrNewDesignControl.programName}}</span>
    </div>
    <!-- 保存按钮 -->
    <a-tooltip placement="bottom"
               :color="userThemeColor || 'blue'">
      <template #title>{{$t('lang.newScenePage.save')}}</template>
      <div class="saveBtn"
           @click="saveClick">
        <SaveOutlined />
      </div>
    </a-tooltip>
    <!-- 全屏按钮 -->
    <div class="fullScreenBtn"
         @click="isFullScreenClick">
      <component :is="isFullScreen?'FullscreenOutlined':'FullscreenExitOutlined'"></component>
    </div>
  </div>
</template>

<script>
import { ArrowLeftOutlined, SaveOutlined, FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { useStore } from 'vuex'
import { useI18n } from 'vue-i18n'
import { ref, getCurrentInstance, onBeforeUnmount } from 'vue'
export default {
  components: {
    ArrowLeftOutlined,
    SaveOutlined,
    FullscreenOutlined,
    FullscreenExitOutlined
  },
  setup () {
    const { proxy } = getCurrentInstance()
    const router = useRouter()
    const store = useStore()
    const { t } = useI18n()

    // 初始化
    const userThemeColor = ref(localStorage.getItem('userThemeColor'))

    // -----------------回退按钮点击触发-----------------
    const confirmExitModal = ref(false)
    const backToHomeClick = () => {
      confirmExitModal.value = true
    }
    const handleOk = () => {
      router.push('/home')
    }
    // ----------------保存按钮点击触发------------------
    const key = 'save'
    const saveClick = () => {
      proxy.$emit('saveThreeComponents')
    }
    const saveStatus = (status) => {
      if (status === 'fail') message.error({ content: t('lang.newScenePage.saveFail'), key })
      if (status === 'success') message.success({ content: t('lang.newScenePage.saveSuccess'), key })
    }
    // ---------------点击全屏按钮/关闭全屏触发-----------
    const isFullScreen = ref(store.state.zhanKaiShouSuoControl.isZhanKaiNewDesignHeader)
    const isFullScreenClick = () => {
      store.commit('zhanKaiShouSuoControl/newDesignHeaderStatus', !isFullScreen.value)
      store.commit('zhanKaiShouSuoControl/newDesignLeftStatus', !isFullScreen.value)
      isFullScreen.value = store.state.zhanKaiShouSuoControl.isZhanKaiNewDesignHeader
      const docElm = document.documentElement
      if (!isFullScreen.value) {
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen()
        } else if (docElm.mozRequestFullScreen) { // FireFox
          docElm.mozRequestFullScreen()
        } else if (docElm.webkitRequestFullScreen) { // Chrome等
          docElm.webkitRequestFullScreen()
        } else if (docElm.msRequestFullscreen) { // IE11
          docElm.msRequestFullscreen()
        }
      }
      if (isFullScreen.value) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      }
    }
    onBeforeUnmount(() => {
      store.commit('editOrNewDesignControl/enterNewDesign')
    })

    return {
      userThemeColor,
      backToHomeClick,
      confirmExitModal,
      handleOk,
      saveClick,
      isFullScreenClick,
      isFullScreen,
      saveStatus
    }
  }
}
</script>

<style lang='less' scoped>
.header {
  width: 100%;
  height: 40px;
  position: relative;
  transition: 0.5s;
  border-bottom: 1px solid @baseColor;
  background-color: #f1f3f4;
  padding: 0 20px;
  display: flex;
  align-items: center;
  z-index: 2;
  .backToHomeBtn {
    width: 25px;
    height: 20px;
    background-color: @bgColor;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid @baseColor;
    border-radius: 4px;
    cursor: pointer;
    &:hover {
      box-shadow: 0px 0px 3px @baseColor;
    }
  }
  .pageTitle {
    width: 200px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: @fontColor;
    span {
      font-family: inter;
      font-size: 18px;
    }
  }
  .saveBtn {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: @baseColor;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .fullScreenBtn {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: @baseColor;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 50px;
    bottom: -30px;
  }
}
.header-shouqi {
  transform: translate(0, -40px);
  transition: 0.5s;
}
</style>
